<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-23 11:14:20
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-24 15:52:11
 * @FilePath: \客户端\app\src\views\articleItem\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="content">
    <div class="main">
      <div class="left">
        <el-card class="play">
          <p>
            <b>{{ title }}</b> 分类文章
          </p>
          <p>
            共搜索到<b>{{ filterLists.length }}</b
            >篇
          </p>
        </el-card>
        <el-card class="articleLists">
          <div>
            <span @click="all">所有</span>
            <span
              v-for="(v, index) in classLists"
              :key="index"
              :class="activeIndex == index ? 'active' : ''"
              class="spanItem"
              @click="classFn(v, index)"
              >{{ v.title }}</span
            >
          </div>
           <div class="article">
            <dl v-for="(v, i) in filterLists" :key="i" class="dl" >
              <p>
                <b>{{ v.title }}</b> {{ getDate(v.date) }}
              </p>
              <dt class="dt">
                <img :src="v.img" alt="" />
                 <p>
                 <span>{{ v.classes }}</span>
                <span class="icons">
                  <el-icon><Star /></el-icon>0 ·
                  <el-icon><HelpFilled /></el-icon> 120 ·
                  <el-icon><Share /></el-icon> 分享
                </span>
               </p>
              </dt>
            </dl>
          </div>
        </el-card>
      </div>

      <div class="text">
        <RightBox />
      </div>
    </div>
  </div>
</template>

<script>
import {
  asyncArticleLists,
  asyncTagLists,
  asyncClassLists,
} from "../../api/article";
import { Star, HelpFilled, Share } from "@element-plus/icons-vue";

import RightBox from "../../components/RightBox.vue";
export default {
  components: {
    RightBox,
     Star,
    HelpFilled,
    Share,
  },
  data() {
    return {
      imgList: [],
      data: [],
      tagList: [],
      classLists: [],
      title: this.$route.query.title,
      activeIndex: this.$route.query.i,
      total: 0,
      filterLists: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getArticleLists();
      this.getTagLists();
      this.getClassLists();
    },
    async getArticleLists() {
      const res = await asyncArticleLists("/articleImg");
      this.data = res.data.list;
      this.filterLists = res.data.list.filter(
        (v) => v.classes == this.$route.query.title
      );
    },
    // 标签
    async getTagLists() {
      const res = await asyncTagLists("/tagLists");
      // console.log(res)
      this.tagList = res.data.list;
    },
    // 分类
    async getClassLists() {
      const res = await asyncClassLists("/classLists");
      //   console.log(res);
      this.classLists = res.data.list;
      this.total = res.data.total;
    },
    // 所有
    async all() {
        this.$router.push('/layout/article')
    },
    // 点击tab切换
    classFn(v, index) {
      // 高亮下标
      this.activeIndex = index;
      this.filterLists = this.data.filter((item) => item.classes == v.title);
      console.log(this.filterLists);
    },
   
  },
   //   计算时间
  computed: {
    getDate() {
      return function (val) {
        var timestamp = new Date(val).getTime();
        var minute = 1000 * 60;
        var hour = minute * 60;
        var day = hour * 24;
        var halfamonth = day * 15;
        var month = day * 30;
        var year = day * 365;
        var now = new Date().getTime();
        var diffValue = now - timestamp;
        var result;
        if (diffValue < 0) {
          return;
        }
        var yearC = diffValue / year;
        var monthC = diffValue / month;
        var weekC = diffValue / (7 * day);
        var dayC = diffValue / day;
        var hourC = diffValue / hour;
        var minC = diffValue / minute;
        if (yearC >= 1) {
          result = "" + parseInt(yearC) + "年前";
        } else if (monthC >= 1) {
          result = "" + parseInt(monthC) + "月前";
        } else if (weekC >= 1) {
          result = "" + parseInt(weekC) + "周前";
        } else if (dayC >= 1) {
          result = "" + parseInt(dayC) + "天前";
        } else if (hourC >= 1) {
          result = "" + parseInt(hourC) + "小时前";
        } else if (minC >= 1) {
          result = "" + parseInt(minC) + "分钟前";
        } else result = "刚刚";
        return result;
      };
    },
  },
};
</script>

<style lang="less" scoped>
.active {
  color: red;
}

@media (min-width: 1200px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      .left {
        width: 50%;
        height: 100%;
        margin-left: 130px;
        .play {
          width: 100%;
          height: 80%;
        //   margin: 10px;
        //   border: 1px solid #ccc;
          background: #fff;
          p {
            text-align: center;
            b {
              color: red;
              font-size: 30px;
            }
          }
        }
      }
     .articleLists {
          width: 100%;
          // margin-left: 0px;
          margin-top: 20px;
          span {
            font-size: 10px;
          }
          .spanItem {
            margin: 10px;
            font-size: 10px;
          }

          .article {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            flex-shrink: 0;

            .dl {
              width: 80%;
              display: flex;
              flex-direction: column;
              padding: 10px;

              b {
                padding: 5px;
              }
              img {
                width: 40%;
                padding: 5px;
              }

              dt {
                display: flex;
                // align-items: flex-start;
                flex-wrap: wrap;
                position: relative;
                span {
                  padding: 10px;
                }
                 p{
                display: flex;
                flex-direction: column;

                .icons {
                // bottom: 10px;
                // position: absolute;
                // left: 250px;
                margin-top: 80px;
              }
              }
              }
            }
          }
        }
      // 右侧
      .text {
        width: 25%;
        margin: 20px;
        position: fixed;
        top: 50px;
        right: 150px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 12px;
        .text-one {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
        .text-two {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          margin-top: 20px;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

@media (min-width: 870px) and (max-width: 1200px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 70%;
      margin-left: auto;
      margin-right: auto;

      .left {
        width: 55%;
        margin-top: 10px;
        height: 100%;
        .play {
          width: 100%;
          height: 80%;
        //   margin-left: -10px;

          // margin: 10px;
        //   border: 1px solid #ccc;
        //   background: #fff;
        b{
            color: red;
            font-size: 20px;
        }
        }

      }
      .articleLists {
          width: 100%;
          margin-left: 0px;
          margin-top: 20px;
          span {
            font-size: 10px;
          }
          .spanItem {
            margin: 10px;
            font-size: 10px;
          }

          .article {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            flex-shrink: 0;

            .dl {
              width: 80%;
              display: flex;
              flex-direction: column;
              padding: 10px;

              b {
                padding: 5px;
              }
              img {
                width: 40%;
                padding: 5px;
              }

              dt {
                display: flex;
                // align-items: flex-start;
                flex-wrap: wrap;
                position: relative;
                span {
                  padding: 10px;
                }
                 p {
                  display: flex;
                  flex-direction: column;
          
                  .icons {
                    // bottom: 10px;
                    // position: absolute;
                    // left: 250px;
                    margin-top: 40px;
                  }
                }
              }
            }
          }
        }
      .text {
        width: 25%;
        margin: 20px;
        position: fixed;
        top: 60px;
        right: 150px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 12px;
        .text-one {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
        .text-two {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          margin-top: 20px;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

@media (min-width: 20px) and (max-width: 870px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      .left {
        width: 100%;
        height: 50%;
       .play {
          width: 100%;
          min-height: 10%;
          margin-left: 10px;

          // margin: 10px;
        //   border: 1px solid #ccc;
        //   background: #fff;
        b{
            color: red;
            font-size: 20px;
        }
        }
      }
     .articleLists {
          width: 100%;
          margin-left: 10px;
          margin-top: 20px;
          span {
            // font-size: 10px;
          }
          .spanItem {
            margin: 10px;
            // font-size: 10px;
          }

          .article {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            flex-shrink: 0;

            .dl {
              width: 80%;
              display: flex;
              flex-direction: column;
              padding: 10px;

              b {
                padding: 5px;
              }
              img {
                width: 40%;
                padding: 5px;
              }

              dt {
                display: flex;
                // align-items: flex-start;
                flex-wrap: wrap;
                position: relative;
                span {
                  padding: 10px;
                }
                  p {
                  display: flex;
                  flex-direction: column;

                  .icons {
                    // bottom: 10px;
                    // position: absolute;
                    // left: 250px;
                    // margin-top: 40px;
                  }
                }
              }
            }
          }
        }

      .text {
        display: none;
        width: 30%;
        margin: 20px;
        height: 100px;
        position: fixed;
        top: 60px;
        right: 50px;
        border: 1px solid #ccc;

        .text-one {
          width: 100%;
          height: auto;
          border: 1px solid #ccc;
          margin-top: 20px;
        }
        .text-two {
          width: 100%;
          height: auto;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
</style>